<!--
  * 名称: DeviceSelect
  * @param deviceType String required
  * @param size String 'large'|'medium'|'small'
  * 使用方式：
  * 在 template 中使用 <device-select></device-select>
-->
<template>
  <el-select
    v-model="videoProfile"
    placeholder="placeholder"
    class="select"
    :teleported="false"
  >
    <el-option
      v-for="(item, index) in videoProfileList"
      :key="index"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script setup lang="ts">
import { ref, watch} from 'vue';
import TUIRoomCore, { TRTCVideoResolution } from '../../tui-room-core';
import {Emitter} from "mitt";
interface Props {
  mitt: Emitter<any>,
}
const props = defineProps<Props>();
const videoProfile = ref('240P');

const videoProfileList = [
  { label: '极速（120P，15FPS，200kbps）', value: '120P' },
  { label: '流畅（240P，15FPS，300kbps）', value: '240P' },
  // { label: '流畅（360P，15FPS，800kbps）', value: '360P' },
  // { label: '标清（540P，15FPS，900kbps）', value: '540P' },
  // { label: '高清（720P，30FPS，1500kbps）', value: '720P' },
  // { label: '超清（1080P，30FPS，2000kbps）', value: '1080P' },
];

const videoProfileMap: Record<string, any> = {
  '120P': { videoResolution: TRTCVideoResolution.TRTCVideoResolution_180_120, fps: 15, videoBitrate: 200 },
  '240P': { videoResolution: TRTCVideoResolution.TRTCVideoResolution_320_240, fps: 15, videoBitrate: 300 },
  // '360P': { videoResolution: TRTCVideoResolution.TRTCVideoResolution_640_360, fps: 15, videoBitrate: 800 },
  // '540P': { videoResolution: TRTCVideoResolution.TRTCVideoResolution_960_540, fps: 15, videoBitrate: 900 },
  // '720P': { videoResolution: TRTCVideoResolution.TRTCVideoResolution_1280_720, fps: 30, videoBitrate: 1500 },
  // '1080P': { videoResolution: TRTCVideoResolution.TRTCVideoResolution_1920_1080, fps: 30, videoBitrate: 2000 },
};

watch(videoProfile, (val: string) => {
  const currentVideoProfileObj = videoProfileMap[val];
  TUIRoomCore.setVideoEncoderParam(currentVideoProfileObj);
  props.mitt.emit('bitrateChange', currentVideoProfileObj.videoBitrate);
});

</script>

<style lang="scss" scoped>
.select {
  width: 280px;
  height: 32px;
  font-size: 14px;
}
</style>
